<template>
  <el-card class="chart-card">
    <div ref="pieChart" class="chart"></div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { getBoardDist } from '../api/statistics'; // 你的板块接口

const pieChart = ref();
let chartInstance = null;

const initChart = (data) => {
  chartInstance = echarts.init(pieChart.value);
  chartInstance.setOption({
    title: {
      text: '板块发帖分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '发帖数',
        type: 'pie',
        radius: '60%',
        data: data.map(item => ({
          name: item.boardName,
          value: item.count
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
};

onMounted(async () => {
  try {
    const response = await getBoardDist(); // 返回应为 [{ boardName: '新闻', count: 100 }, ...]
    initChart(response);
  } catch (error) {
    console.error('获取板块分布失败:', error);
  }
});
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
.chart-card {
  margin-bottom: 20px;
}
</style>